<template>
	<div id="requireList">
<el-dialog title="请输入提现金额" :visible.sync="dialogFormVisible" style="text-align:left;" size="tiny">
				<el-form>
					<el-form-item label="请输入提现金额" :label-width="formLabelWidth">
						<el-input v-model="money" auto-complete="off" style="width:120px"></el-input>
					</el-form-item>

				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button @click="dialogFormVisible = false">取 消</el-button>
					<el-button type="primary" @click="requireCash">确 定</el-button>
				</div>
			</el-dialog>
		<div class="header">

			<el-button type="primary" class="require" @click='dialogFormVisible = true'>提现申请</el-button>
			状态
			<el-select v-model="cashInfo.status" clearable placeholder="全部">
				<el-option v-for="item in status" :key="item.value" :label="item.label" :value="item.value">
				</el-option>
			</el-select>

			起始时间
			<div class="block">
				<el-date-picker v-model="cashInfo.beginTime" type="datetime" placeholder="选择日期时间" class="width1">
				</el-date-picker>
			</div>
			结束时间
			<div class="block ">
				<el-date-picker v-model="cashInfo.endTime" type="datetime" placeholder="选择日期时间" class="width1">
				</el-date-picker>
			</div>
			<el-button type="primary" size="mini" @click="getCashList">查询</el-button>

		</div>
		<el-table :data="tableData" stripe style="width: 100%" v-loading="loading">
			<el-table-column prop="username" label="用户">
			</el-table-column>
			<el-table-column prop="money" label="提现金额（元）">
			</el-table-column>
			<el-table-column prop="fee" label="手续费（元)">
			</el-table-column>
			<el-table-column prop="cardPhone" label="手机号" show-overflow-tooltip>
			</el-table-column>
			<el-table-column prop="cardNo" label="卡号" show-overflow-tooltip>
			</el-table-column>
			<el-table-column prop="cardPerson" label="持卡人">
			</el-table-column>
			<el-table-column prop="status" label="处理结果">
			</el-table-column>
			<el-table-column prop="createTime" label="申请时间" show-overflow-tooltip>
			</el-table-column>
			<el-table-column prop="finishTime" label="处理时间" show-overflow-tooltip>
			</el-table-column>
		</el-table>
		<div class="block" style="text-align: right;padding-right: 40px;">

			<el-pagination :current-page.sync="pageNumber" @current-change='handleChange' :page="pageNumber" :page-size="pageSize" layout="total, prev, pager, next" :total="total">
			</el-pagination>
		</div>
	</div>
</template>

<script>
	import dateformat from 'dateformat'
	export default {
		name: "requireList",
		data() {
			return {
				dialogFormVisible: false,
				formLabelWidth: '120px',
				status: [{
						value: 1,
						label: '待处理'
					},
					{
						value: 7,
						label: '成功'
					},
					{
						value: 8,
						label: '失败'
					}
				],

				cashInfo: {

					status: '',
					beginTime: '',
					endTime: '',
					pageSize: 10,
					pageNumber: 1
				},
				tableData: [],
				pageSize: 10,
				pageNumber: 1,
				total: 1,
				money: 0,
				loading: false
			}
		},
		created() {
			this.getCashList()
		},
		methods: {

			getCashList() {
				this.loading = true;
				this.cashInfo.beginTime = Date.parse(this.cashInfo.beginTime);
				this.cashInfo.endTime = Date.parse(this.cashInfo.endTime);
				//console.log(Date.parse(this.cashInfo.createTime) + "-----" + Date.now())
			    let params = {};
			    Object.assign(params,this.cashInfo);
			    for(let item in params){

			    	if(params[item] == ''){

			    		delete params[item];
			    	}
			    	if(isNaN(params[item])){
			    		delete params[item];
			    	}
			    }

				this.$api.getCashList(params).then(res => {

					if(res.data.code == '000000') {
						this.loading = false;
						console.log(res.data);
						this.total = res.data.data.totalRow;
						this.$message({
							type: "success",
							message: "查询成功"
						})
						this.tableData = res.data.data.list;
						this.tableData.forEach(item => {
							if(item.createTime) {
								let date = new Date(item.createTime);
								item.createTime = dateformat(date, 'yyyy-mm-dd HH:MM:ss')
							};
							if(item.finishTime != null && item.finishTime != '') {
								let date = new Date(item.finishTime);
								item.finishTime = dateformat(date, 'yyyy-mm-dd HH:MM:ss')
							} else {
								item.finishTime = ''
							}
							if(item.status && item.status == '1') {
								item.status = '待处理'
							}
							if(item.status && item.status == '7') {
								item.status = '成功'
							}
							if(item.status && item.status == '8') {
								item.status = '失败'
							}
						})
					} else {
						this.$message({
							type: "error",
							message: "查询失败"
						})
						this.loading = false
					}

				}).catch(() =>{
					this.$message({
							type: "error",
							message: "查询失败"
						})
					this.loading = false
				})
			},
			requireCash() {
				let params = {
					total: this.money
				}
					this.dialogFormVisible = false;
				this.$api.requireCash(params).then(res => {
					if(res.data.code == '000000') {
						console.log(res.data);
						this.$message({
							type: "success",
							message: "申请成功"
						})

						this.getCashList();

					} else {
						this.$message({
							type: "error",
							message: "申请失败"
						})

					}
				}).catch(() => {
					this.$message({
						type: "error",
						message: "申请失败"
					})
				})
			},
			handleChange(val) {
				this.cashInfo.pageNumber = val;

				this.getCashList()
			}
		}
	}
</script>

<style lang="less">
	#requireList {
		th {
			text-align: center;
		}
		.el-input {
			width: 80px;
			display: inline-block;
			margin: 0 8px;
		}
		.header {
			padding: 18px 40px;
			font-size: 12px;
			white-space: nowrap;
			display: flex;
			justify-content: center;
			position: relative;
			.el-input__inner {
			height: 20px;
			font-size: 12px;
		}

		}
		.width1 {
			width: 160px;
		}
		.require {
			position: absolute;
			left: 20px;
			top: 8px;
		}
	}
</style>
